<template>
<el-row>
    <el-col :span="4" class="scrollThin" style="height:calc(100vh - 110px);overflow-y: scroll">
        <CommonPmsCategory @selectCatId="selectCatId"/>
    </el-col>
    <el-col :span="20" class="scrollNo" style="padding:0 5px;height:calc(100vh - 110px);overflow-y: scroll">
    <div>
    <el-form inline class="demo-form-inline">
    <el-row >
        <el-col :span="5">
            <el-form-item label="属性名">
                <el-input v-model="query.payload.attrName" placeholder="属性名" />
            </el-form-item>
        </el-col>
        <el-form-item>
            <el-button type="primary" activity @click="queryPmsAttr">查询</el-button>
            <el-button type="warning" activity @click="reset">重置</el-button>
            <el-button type="success" @click="addPmsAttr">新增</el-button>
        </el-form-item>
    </el-row>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index"  label="序号" width="70px" />
        <el-table-column align="center" prop="attrName" label="属性名" />
        <el-table-column align="center" prop="searchType" label="可检索" width="80px">
            <template #default="scope">
                <el-icon :size="17"  v-if="scope.row.searchType===1"><Select /></el-icon>
                <el-icon :size="17" v-else><CloseBold /></el-icon>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="valueType" label="值类型" width="80px" >
            <template #default="scope">
                <el-tag effect="dark" type="success" v-if="scope.row.valueType===0">单选</el-tag>
                <el-tag effect="dark" v-else>多选</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="icon" label="属性图标" width="100px" />
        <el-table-column align="left" header-align="center" prop="valueSelect" label="可选值列表" show-overflow-tooltip>
            <template #default="scope">
                <el-tag effect="dark" type="primary" v-for="value in scope.row.valueSelect.split(';')"
                        style="margin-left: 2px">{{value}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="enable" label="启用" width="80px">
            <template #default="scope">
                <el-icon :size="17" v-if="scope.row.enable===1"><Select/></el-icon>
                <el-icon :size="17" v-else><CloseBold /></el-icon>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="catalogName" label="所属分类" />
        <el-table-column align="center" prop="groupName" label="所属分组" />
        <el-table-column align="center" prop="showDesc" label="快速展示" width="100px">
            <template #default="scope">
                <el-icon :size="17"  v-if="scope.row.showDesc===1"><Select /></el-icon>
                <el-icon :size="17" v-else><CloseBold /></el-icon>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="130px">
            <template #default="scope">
                <el-link title="修改" type="primary" @click="editPmsAttr(scope.row.attrId)">
                    <el-icon :size="15">
                        <Edit />
                    </el-icon>
                    修改
                </el-link>
                &nbsp;
                <el-popconfirm title="删除？" @confirm="deletePmsAttr(scope.row.attrId)"  @cancel="">
                    <template #reference>
                        <el-link type="danger" title="删除">
                            <el-icon :size="15">
                                <Delete />
                            </el-icon>
                            删除
                        </el-link>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
</el-table>
<el-pagination
        style="display: flex;align-items:center;justify-content:center;"
        v-model:currentPage="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
        @size-change="queryPmsAttr"
        @current-change="queryPmsAttr"
/>
<ModPmsAttr @close="modPmsAttr.isOpen = false"  @reload="queryPmsAttr"
              ref="modPmsAttr"
              :openType="transData.openType"
              :id="transData.id" />
</div>
</el-col>
</el-row>
</template>

<script setup>
    import ModPmsAttr from '@/views/mall/pms/components/ModPmsAttr.vue'
    import CommonPmsCategory from '@/components/common/CommonPmsCategory.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'
    let transData = reactive({})
    let modPmsAttr = ref(null)
    let data = reactive({
        modRole:false,
        tableData:[],
        openType:"",
        id:"",
    });
    let loading = ref(true)
    let query = reactive({dateRange:[],payload:{}, currentPage:1,pageSize:10,total:0})
    onMounted(() => {
        queryPmsAttr()
    })
    function queryPmsAttr(){
        query.payload.attrType = 1 //基本属性
        request.post("/api/pmsAttr/getPmsAttrPage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset(){
            query.payload.attrId = ""
            query.payload.attrName = ""
            query.payload.searchType = ""
            query.payload.valueType = ""
            query.payload.icon = ""
            query.payload.valueSelect = ""
            query.payload.attrType = ""
            query.payload.enable = ""
            query.payload.catalogId = ""
            query.payload.showDesc = ""
    }

    function addPmsAttr(){
        transData.openType = "add"
        modPmsAttr.value.isOpen = true
    }

    function deletePmsAttr(id){
        request.get(`/api/pmsAttr/delete/${id}`).then(resp => {
            queryPmsAttr()
            ElMessage({message: '删除成功！',openType: 'success'})
        });
    }

    function editPmsAttr(id){
        transData.id = id
        transData.openType = "edit"
        modPmsAttr.value.isOpen = true
    }
    const selectCatId = (catalogId)=>{
        query.payload.attrType = 1 //基本属性
        query.payload.catalogId = catalogId
        request.post("/api/pmsAttr/getPmsAttrPage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }
</script>
<style lang="css">

</style>


